layui.use(['table', 'jquery','element'], function () {
    //使用layui的table模块来操作表格
    let table = layui.table;
    //使用layui的jquery模块
    let $ = layui.$;
    //导航的hover效果、二级菜单等功能，需要依赖element模块
    var element = layui.element; 


    //当页面加载就需要渲染表格数据
    table.render({
        elem: '#demo',   //引用表格的ID
        id: 'messageTable', //这个id是render的id，可以用于表格reload时引用
        url: 'http://localhost:8080/message/selectByPage',  // 请求地址
        method: 'get',
        toolbar: '#searchToolBar',   //设置toolbar
        page: true,  //启用表格分页功能
        // width:1500,
        cols: [[     //表头
            { field: 'messageId', title: 'Id', sort: true, fixed: 'left', width: '7%' },
            { field: 'title', title: '标题' },
            { field: 'content', title: '内容', width: '25%' },
            { field: 'sendUserName', title: '发送人' },
            { field: 'receiveUserName', title: '接收人' },
            { field: 'status', title: '状态', width: '7%', sort: true },
            { field: 'createTime', title: '创建时间', sort: true }
        ]],
        done: function (res, curr, count) {
            // 根据字段status的值 显示已读还是未读 
            $("[data-field='status']").children().each(function () {
                if ($(this).text() == '1') {
                    $(this).text('');
                    $(this).append("<span style='display:inline-block;border-radius:4px;padding:0 10px;height:28px;text-align:center;line-height:26px;background-color: #fdf6ec;color: #e6a23c;border:1px solid #faecd8;'>未读</span>");
                } else if ($(this).text() == '2') {
                    $(this).text('');
                    $(this).append("<span style='display:inline-block;border-radius:4px;padding:0 10px;height:28px;text-align:center;line-height:26px;background-color: #f0f9eb;color: #67c23a;border:1px solid #e1f3d8;'>已读</span>");
                }
            })

        }
    });

    //绑定表格的toolbar事件
    table.on('toolbar(messageList)', function (obj) {
        //获取按钮对象lay-event属性值
        let event = obj.event;

        switch (event) {
            //在不同的case中做不同的按钮事件处理
            case 'search':
                //重载表格加载新的数据, 引用render的id
                table.reload('messageTable', {
                    method: 'get',
                    where: {
                        sendUserName: $('#sendUserName').val(),
                        receiveUserName: $('#receiveUserName').val()
                    },
                    page: {
                        curr: 1  //查询回来后默认显示在第一页
                    }
                });
        }

    });

    // 解决表格在排序之后没有重新渲染问题
    table.on('sort(messageList)', function (obj) {
        table.reload('messageTable', {
            initSort: obj
        });
    });
    table.reload('messageTable', {});


});